﻿PuppetPlay.MoveHandle = function (config) {
    Kinetic.Group.apply(this, [config]);
    this._initComponents();
}
PuppetPlay.MoveHandle.prototype = {
    _initComponents: function () {

        var rsWalkWheel = PuppetPlay.Sources.Images.controls.walkWheel;
		var rsRotateWheel = PuppetPlay.Sources.Images.controls.rotateWheel;

        //hot area
        this.add(new Kinetic.Shape({
		    x: -rsRotateWheel.width/2,
			y: -26,
		    width: rsRotateWheel.width,
			height: 52,
            drawFunc: function(context){
			    context.beginPath();
			    context.rect(0, 0, this.attrs.width, this.attrs.height);
				context.closePath();
				context.drawImage(rsWalkWheel.obj, 0, 0, rsWalkWheel.width, rsWalkWheel.height, rsRotateWheel.width/2 - 26, 0, rsWalkWheel.width, rsWalkWheel.height);
				this.fill(context);
			}            
        }));

        var setting = PuppetPlay.Setting;
        var proxyRadius = 60;
        var proxy = document.createElement('div');

        proxy.className = 'pp-move-proxy';
        proxy.style.left = this.attrs.proxyPosition.x - 60 + 'px';
        proxy.style.bottom = this.attrs.x + 32 + 'px';
        proxy.owner = this;
        document.body.appendChild(proxy);

        var that = this;
        if (PuppetPlay.Util.isMsTouch) {
            $(proxy).on('MSPointerDown.' + this.attrs.id, this.onPointerDown);
        } else {
            proxy.addEventListener('mousedown', this.onPointerDown, false);
        }
    },

    onPointerDown: function (e) {
        e = e.originalEvent;
        var that = this;
        var owner = this.owner;
        this.oldPos = {
            x: e.clientX + window.pageXOffset,
            y: e.clientY + window.pageYOffset
        };

        if (PuppetPlay.Util.isMsTouch) {
            $(document).on('MSPointerMove.' + owner.attrs.id, owner.onPointerMove);
            $(document).on('MSPointerUp.' + owner.attrs.id, owner.onPointerUp);
            Kinetic.Global.pointerMap[e.pointerId] = this;
        } else {
            this.oldPos = this.getStage().mousePos;
            this.getStage().on('mousemove.' + this.attrs.id, function (e) { that.onPointerMove(e); });
        }
    },

    onPointerMove: function (e) {
        try {
            e = e.originalEvent;
            var proxy = Kinetic.Global.pointerMap[e.pointerId];
            var owner = proxy.owner;
            var util = PuppetPlay.Util;
            var pos = {
                x: e.clientX + window.pageXOffset,
                y: e.clientY + window.pageYOffset
            };
            var moveXY = {
                x: util.round(pos.x - proxy.oldPos.x),
                y: 0
            };

        
            if (owner.attrs.beforeMove && !owner.attrs.beforeMove.call(owner, moveXY)) {
                return false;
            }

            if (owner.attrs.afterMove) {
                owner.attrs.afterMove(moveXY);
            }
            $(proxy).css('left', owner.getAbsolutePosition().x - $(proxy).width() / 2);

            proxy.oldPos = pos;
        } catch (e) {
        }
    },

    onPointerUp: function (e) {
        try {
            e = e.originalEvent;
            var proxy = Kinetic.Global.pointerMap[e.pointerId];
            var owner = proxy.owner;
            delete Kinetic.Global.pointerMap[e.pointerId];
        
            $(this).off('MSPointerMove.' + owner.attrs.id, owner.onPointerMove);
            $(this).off('MSPointerUp.' + owner.attrs.id, owner.onPointerUp);
        } catch(e){
        }
    }
};
Kinetic.Global.extend(PuppetPlay.MoveHandle, Kinetic.Group);